import React, { Component } from 'react';

// https://lbs.amap.com/api/javascript-api/reference/search#m_AutocompleteOptions
class Autocomplete extends Component {
  constructor(props) {
    super(props);
    this.onSelect = this.onSelect.bind(this);
  }

  shouldComponentUpdate() {
    return false;
  }

  componentDidMount() {
    this.loadWithOptions(this.props);
  }

  loadWithOptions(props) {
    this.map = props.__map__;
    if (!this.map) {
      console.log('组件必须作为 Map 的子组件使用');
      return;
    }
    if (!props.options) {
      console.log('必须指定Autocomplete插件的配置参数');
      return;
    }
    if (typeof props.onSelect !== 'function') {
      console.log('必须指定onSelect回调函数');
      return;
    }
    this.map.plugin(['AMap.Autocomplete', 'AMap.Geocoder', 'AMap.PlaceSearch'], () => {
      let opts = { input: 'autoinput' };
      Object.assign(opts, props.options);
      console.log('init with options:', opts);
      const auto = new window.AMap.Autocomplete(opts);

      this.map.addControl(auto);
      window.AMap.event.addListener(auto, 'select', this.onSelect); //注册监听，当选中某条记录时会触发
      const geoloc = new window.AMap.Geocoder({});
      console.log(geoloc);
      this.map.addControl(geoloc);
      this.geoloc = geoloc;
      this.auto = auto;
    });

    // this.map.plugin('AMap.PlaceSearch', value => {
    //   //异步加载插件

    //   search.search(value, function(status, result) {
    //     // 查询成功时，result即对应匹配的POI信息
    //     console.log(result);
    //   });
    // });
  }

  checkD = (status, result) => {
    if (status === 'complete' && result.info === 'OK') {
      // var pois = result.poiList.pois;
      // for (var i = 0; i < pois.length; i++) {
      //   var poi = pois[i];
      //   var marker = [];
      //   marker[i] = new AMap.Marker({
      //     position: poi.location, // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
      //     title: poi.name,
      //   });
      //   // 将创建的点标记添加到已有的地图实例：
      //   this.map.add(marker[i]);
      //   marker[i].on('click', e => {
      //     console.log('search marker', e);
      //     // var hs = e.target.extData;
      //     // var content = searchContent(hs['name'], hs['address'], hs['getLng'], hs['getLat']);
      //     // searchInfoWindow.setContent(content); //点击以后窗口展示的内容
      //     // searchInfoWindow.open(this.map, e.target.getPosition());
      //   });
      let marks = this.map.getAllOverlays('marker');
      console.log('marks', marks);
      for (let i = 0; i < marks.length; i++) {
        let mark = marks[i];

        mark.on('rightclick', e => {
          this.props.setClickPos(e.lnglat);
          this.props.contextMenu.open(this.map, e.lnglat);
        });
      }
    }
  };

  onSelect = e => {
    if (!e.poi.location) {
      const poi = e.poi;
      this.geoloc &&
        this.geoloc.getLocation(poi.district + poi.address, (status, result) => {
          console.log('getLocation', status, result);
          if (result && result.info === 'OK') {
            e.poi.location = result.geocodes[0].location;
          }
          this.props.onSelect(e);
        });
      return;
    }

    this.props.onSelect(e);
    let search = new window.AMap.PlaceSearch({ map: this.props.__map__ });
    search.search(e.poi.name, this.checkD);
    //window.AMap.event.addListener(search, 'markerClick', this.markerClick);
  };

  markerClick = e => {
    this.map
      .getAllOverlays('marker')
      .forEach(item => item.on('rightclick', () => this.contextMenu.open(this.map, item.lnglat)));
    //e.marker.on('rightclick', () => console.log('marker', e.marker));
  };
  render() {
    if (this.props.options && this.props.options.input) {
      // console.log('no input ctrl:', this.props, this.props.options);
      return null;
    }
    return <input id="autoinput" placeholder={this.props.placeholder} style={this.props.style} />;
  }
}

module.exports = Autocomplete;
